<template>
  <div>
    <el-dialog title="商家详情" :visible.sync="dialogVisible" width="45%" :before-close="handleClose">
      <el-descriptions :column="1" labelClassName="labelClassName" size="medium" :colon="false">
        <el-descriptions-item label="商家名称：">{{ info.title }}</el-descriptions-item>
        <el-descriptions-item label="商家详细地址：">{{ info.store_address }}</el-descriptions-item>
        <el-descriptions-item label="经度：">{{ info.longitude }}</el-descriptions-item>
        <el-descriptions-item label="纬度：">
          {{ info.latitude }}
        </el-descriptions-item>
        <el-descriptions-item label="营业时间：">{{ info.business_hours }}</el-descriptions-item>
        <el-descriptions-item label="联系电话：">{{ info.store_phone }}</el-descriptions-item>
        <el-descriptions-item label="商家公告：">{{ info.announcement }}</el-descriptions-item>
        <el-descriptions-item label="配送信息：">{{ info.delivery_info }}</el-descriptions-item>
        <el-descriptions-item label="商家图片：">
          <div v-for="(url, idx) in info.store_imgs" :key="url">
            <el-image
              style="width: 130px; height: 130px; margin: 0 5px"
              :src="url"
              fit="cover"
              :preview-src-list="info.store_imgs"
              :initial-index="idx"
            ></el-image>
          </div>
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        dialogVisible: false,
        info: {},
      }
    },
    methods: {
      open(row) {
        this.info = { ...row }
        let arr_imgs = this.info.store_imgs.split(',')
        this.info.store_imgs = arr_imgs.map((item) => {
          return this.$baseUrl + item
        })
        console.log('this.info: ', this.info)
        this.dialogVisible = true
      },
      handleClose() {
        this.info = {}
        this.dialogVisible = false
      },
    },
  }
</script>

<style scoped lang="scss">
  .el-descriptions {
    // padding: 5px 20px;
    font-size: 15px;
    font-weight: 600 !important;
    color: #303133 !important;
  }

  .labelClassName {
    font-weight: 600 !important;
    width: 100px !important;
    color: red !important;
  }
</style>
